<template>
  <slot v-if="hasPermission" />
  <slot v-else name="no-permission">
    <!-- 默认无权限时不显示内容 -->
  </slot>
</template>

<script setup>
import { computed } from "vue";
import { checkPermission } from "@/directives/permission";

const props = defineProps({
  // 权限标识，支持单个权限或权限数组
  permission: {
    type: [String, Array],
    required: true,
  },
  // 权限模式：'any'（任一权限满足）或 'all'（所有权限都满足）
  mode: {
    type: String,
    default: "any",
    validator: (value) => ["any", "all"].includes(value),
  },
});

const hasPermission = computed(() => {
  return checkPermission(props.permission, props.mode);
});
</script>